import { Input } from 'antd';
import { ChangeEvent, FocusEventHandler } from 'react';
import styled from 'styled-components';

const CustomInput = styled(Input)`
  color: #27292a;

  &:hover,
  &:focus,
  &:focus-within {
    border-color: #464681;
  }
`;

export const InputWidget = ({
  maxLength,
  value,
  onChange,
  onFocus,
  disabled,
  placeholder,
}: {
  maxLength?: number;
  value?: string;
  onChange?: (value: string) => void;
  onFocus?: FocusEventHandler<HTMLInputElement>;
  disabled?: boolean;
  placeholder?: string;
}) => {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    onChange?.(value);
  };
  return (
    <CustomInput
      maxLength={maxLength}
      value={value}
      onChange={handleChange}
      onFocus={onFocus}
      disabled={disabled}
      placeholder={placeholder}
    />
  );
};
